{% extends "base.html" %}

{% block title %}详细报表 - 管理后台{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <h1 class="h3 mb-4 text-gray-800">详细报表</h1>
            
            <!-- 日期选择器和导出功能 -->
            <div class="card mb-4">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8">
                            <form method="get" class="form-inline">
                                <div class="form-group mr-3">
                                    <label for="start_date" class="mr-2">开始日期:</label>
                                    <input type="date" class="form-control" id="start_date" name="start_date" value="{{ start_date }}">
                                </div>
                                <div class="form-group mr-3">
                                    <label for="end_date" class="mr-2">结束日期:</label>
                                    <input type="date" class="form-control" id="end_date" name="end_date" value="{{ end_date }}">
                                </div>
                                <button type="submit" class="btn btn-primary">查询</button>
                                <a href="?" class="btn btn-secondary ml-2">重置</a>
                            </form>
                        </div>
                        <div class="col-md-4 text-right">
                            <div class="btn-group">
                                <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="fas fa-download"></i> 导出报表
                                </button>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" href="/admin/export?export=all&start_date={{ start_date }}&end_date={{ end_date }}">完整报表</a>
                                    <a class="dropdown-item" href="/admin/export?export=orders&start_date={{ start_date }}&end_date={{ end_date }}">订单报表</a>
                                    <a class="dropdown-item" href="/admin/export?export=users&start_date={{ start_date }}&end_date={{ end_date }}">用户报表</a>
                                    <a class="dropdown-item" href="/admin/export?export=products&start_date={{ start_date }}&end_date={{ end_date }}">产品报表</a>
                                    <a class="dropdown-item" href="/admin/export?export=production&start_date={{ start_date }}&end_date={{ end_date }}">生产报表</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 订单统计 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">订单统计</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="text-center">
                                <h4 class="font-weight-bold">{{ stats.orders.total }}</h4>
                                <p class="text-muted">总订单数</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h4 class="font-weight-bold">¥{{ "%.2f"|format(stats.orders.total_revenue) }}</h4>
                                <p class="text-muted">总收入</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h4 class="font-weight-bold">¥{{ "%.2f"|format(stats.orders.avg_revenue) }}</h4>
                                <p class="text-muted">平均订单金额</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h4 class="font-weight-bold">{{ "%.1f"|format(stats.orders.completion_rate) }}%</h4>
                                <p class="text-muted">完成率</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 订单状态分布 -->
                    <div class="mt-4">
                        <h6 class="font-weight-bold mb-3">订单状态分布</h6>
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>状态</th>
                                        <th>数量</th>
                                        <th>占比</th>
                                        <th>收入</th>
                                        <th>平均金额</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for status in stats.orders.status_breakdown %}
                                    <tr>
                                        <td>
                                            <span class="badge badge-{{ status.color }}">{{ status.name }}</span>
                                        </td>
                                        <td>{{ status.count }}</td>
                                        <td>{{ "%.1f"|format(status.percentage) }}%</td>
                                        <td>¥{{ "%.2f"|format(status.revenue) }}</td>
                                        <td>¥{{ "%.2f"|format(status.avg_amount) }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 用户统计 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">用户统计</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="text-center">
                                <h4 class="font-weight-bold">{{ stats.users.total }}</h4>
                                <p class="text-muted">总用户数</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h4 class="font-weight-bold">{{ stats.users.active }}</h4>
                                <p class="text-muted">活跃用户</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h4 class="font-weight-bold">{{ "%.1f"|format(stats.users.growth_rate) }}%</h4>
                                <p class="text-muted">月增长率</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h4 class="font-weight-bold">{{ stats.users.avg_orders }}</h4>
                                <p class="text-muted">平均订单数</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 用户类型分布 -->
                    <div class="mt-4">
                        <h6 class="font-weight-bold mb-3">用户类型分布</h6>
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>类型</th>
                                        <th>数量</th>
                                        <th>占比</th>
                                        <th>订单数</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for type in stats.users.type_breakdown %}
                                    <tr>
                                        <td>{{ type.name }}</td>
                                        <td>{{ type.count }}</td>
                                        <td>{{ "%.1f"|format(type.percentage) }}%</td>
                                        <td>{{ type.orders }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 产品统计 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">产品统计</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="text-center">
                                <h4 class="font-weight-bold">{{ stats.products.total }}</h4>
                                <p class="text-muted">总产品数</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h4 class="font-weight-bold">{{ stats.products.active }}</h4>
                                <p class="text-muted">活跃产品</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h4 class="font-weight-bold">¥{{ "%.2f"|format(stats.products.avg_price) }}</h4>
                                <p class="text-muted">平均价格</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h4 class="font-weight-bold">{{ stats.products.total_stock }}</h4>
                                <p class="text-muted">总库存</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 生产统计 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">生产统计</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="text-center">
                                <h4 class="font-weight-bold">{{ stats.production.total }}</h4>
                                <p class="text-muted">总生产任务</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h4 class="font-weight-bold">{{ stats.production.completed }}</h4>
                                <p class="text-muted">已完成</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h4 class="font-weight-bold">{{ "%.1f"|format(stats.production.success_rate) }}%</h4>
                                <p class="text-muted">成功率</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h4 class="font-weight-bold">{{ stats.production.avg_time }}</h4>
                                <p class="text-muted">平均用时(小时)</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
{% endblock %}